<template>
  <div @click="onClick" class="afast-switch">
    <div class="round" :class="modelValue ? 'on' : ''"></div>
  </div>
</template>
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';
const emit = defineEmits(["update:modelValue"]);
const props = defineProps<{
  modelValue: boolean;
}>();
const onClick = () => {
  emit("update:modelValue", !props.modelValue);
};
</script>
<style lang="less">
.afast-switch {
  width: 30px;
  height: 15px;
  border-radius: 15px;
  cursor: pointer;
  background: #ddd;
  border: 1px solid #eee;

  .round {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: rgb(200, 200, 200);
    transition: 0.2s;
  }

  .round.on {
    margin-left: 14px;
    transition: 0.2s;
    background: var(--primary-color);
  }
}
</style>
